<template>
    <div class="app-container">
        <div class="top-box clearfix">
            <div class="left-box clearfix">
                <el-input placeholder="模块名称" v-model="newsModule.name" ></el-input>
                <el-input placeholder="模块备注" v-model="newsModule.remark" ></el-input>
            </div>
            <div class="right-box clearfix">
                <el-button type="success" @click="addNewsModule()">添加模块</el-button>
                <el-button type="primary" @click="initNewsModules()">刷新表格</el-button>
            </div>
        </div>


        <div class="modules-box">
            <table class="z-table news-module-table">
                <thead>
                    <tr>
                        <th style="width: 200px">ID</th>
                        <th>名称</th>
                        <th>备注</th>
                        <th>文章数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="m in newsModules" :key="m.id">
                        <td>{{m.id}}</td>
                        <td>{{m.name}}</td>
                        <td>{{m.remark}}</td>
                        <td>{{m.number}}</td>
                        <td>
                            <a class="z-label" @click="editNewsModuleUi(m)">编辑</a>
                            <a class="z-label danger" @click="deleteNewsModuleBefor(m)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <el-dialog
            :title="'编辑模块 ID:' + editedModule.id"
            :visible.sync="editDialogVisible"
            width="30%">
            <div class="form-box">
                <div class="form-group">
                    <div class="form-label">
                        名称
                    </div>
                    <div class="form-input">
                        <el-input v-model="editedModule.name"></el-input>
                    </div>

                </div>
                <div class="form-group">
                    <div class="form-label">
                        备注
                    </div>
                    <div class="form-input">
                        <el-input v-model="editedModule.remark"></el-input>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">

                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editModule()">编 辑</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import '@/styles/z-table.css'

    import axios from 'axios'
    import global from "@/utils/global";
    import newsModuleApi from '@/api/newsModule'
    import {Message} from 'element-ui'
    export default {
        name: "news-module",
        data:function(){
            return {
                editDialogVisible: false,
                newsModule:{
                    name:'',
                    remark:''
                },
                newsModules:[],
                editedModule:{}
            }
        },
        methods:{
            addNewsModule: function () {
                const _this = this;
                if (_this.newsModule.name == ''){
                    Message.error('模块名称不得为空')
                    return
                }
                newsModuleApi.add(_this.newsModule).then(function (data) {
                    Message.success('添加成功')
                    
                    _this.initNewsModules()
                }).catch(function () {
                    Message.error('添加失败')
                })

            },
            //init news-module table
            initNewsModules: function (noMessge) {
                const _this = this;
                newsModuleApi.findAll().then(function (data) {
                    _this.newsModules = data
                    if (!noMessge)
                        _this.$message({type:'success',message:'加载文章模块信息成功'})
                }).catch(function () {
                    if (!noMessge)
                        _this.$message({type:'error',message:'加载文章模块信息失败'})
                })
            },
            deleteNewsModuleBefor(m){
                const _this = this;
                if (m.number > 0){
                    this.$alert('该模块下存在文章，若删除将其下文章暂存草稿箱!', {
                        confirmButtonText: '确定',
                        callback: action => {
                            _this.deleteNewsModule(m.id)
                        }
                    });
                }else{
                    _this.deleteNewsModule(m.id)
                }

            },
            deleteNewsModule: function (id) {
                const _this = this;
                newsModuleApi.deleteById(id).then(function (data) {
                    _this.$message({type:'success',message:'删除成功'})
                    _this.initNewsModules(true)
                }).catch(function () {
                    _this.$message({type:'error',message:'删除失败'})

                })
            },
            editNewsModuleUi:function (module) {
                this.editDialogVisible = true
                this.editedModule = module
            },
            editModule:function () {
                const _this = this;
                this.editDialogVisible = false
                newsModuleApi.edit(this.editedModule).then(function (data) {
                    _this.$message({type:'success',message:'编辑成功'})
                    _this.initNewsModules(true)
                }).catch(function () {
                    _this.$message({type:'error',message:'编辑失败'})
                    _this.initNewsModules(true)
                })
            }
        },
        mounted:function () {
            this.initNewsModules()
        }
    }
</script>

<style scoped>
    .add-box{
        display: flex;
        margin-bottom: 22px;
        width: 100%;
    }
    .add-box .col:nth-of-type(1),.add-box .col:nth-of-type(2){
        flex: 7;
        margin-right: 20px;
    }
    .add-box .col:nth-of-type(3){
        flex: 2;
        text-align: right;
    }
    .add-box .col:nth-of-type(4){
        flex: 2;
        text-align: right;
    }
    .news-module-table{
        width: 100%;
    }
    .top-box .left-box{
        float: left;
    }
    .top-box .left-box>*{
        width: 300px;
    }
    .top-box .right-box{
        float: right;
    }
</style>
